<template>
  <div class="order-item">
    <div class="wrapper" ref="orderWrapper">
      <ul class="order-ul">
        <li v-for="(item,index) in itemarr">
          <div class="yh">
            <h1>订单号：{{itemarr[index].system_order_no}}<span v-if="itemarr[index].order_type==1">外送</span></h1>
            <img class="icon-img" src="../.././assets/phone.png" @click="call(itemarr[index].receiver_phone)"></img>
          </div>
          <div class="o-goods">
            <h1>商品</h1>
            <div class="beiz" v-show="item.description!='' && item.description!=null">
              <p><span>备注：</span>{{item.description}}</p>
            </div>
            <ul class="o-goods-ul">
              <li v-for="goods in itemarr[index].good_list">
                <p class="g-title">{{goods.goods_name}}</p>
                <p class="g-num">{{goods.total_num}}</p>
                <p class="g-money">￥{{goods.total_fee}}</p>
              </li>
            </ul>
            <div class="z-money">
              <h1>总额</h1>
              <span>￥{{itemarr[index].total_fee}}</span>
            </div>
            <div class="g-btn" v-if="btnShow">
              <mt-button class="btn-ju" type="default" @click="judan(itemarr[index].id,itemarr[index].system_order_no)">拒单</mt-button>
              <mt-button class="btn-jie" type="primary" @click="jiedan($event,itemarr[index].id,itemarr[index].system_order_no)">接单</mt-button>
            </div>
          </div>
          
        </li>
      </ul>
      <div class="loading-wrapper" >
          <mt-spinner v-show="loadmore" color="#26a2ff" type="triple-bounce"></mt-spinner>
          <p v-show="nomore">没有更多啦</p>
      </div>
    </div>
    <h1 class="no-data" v-if="nodata">没有数据</h1>
  </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import authorComp from 'components/common/authorComp.vue'
import { Toast } from 'mint-ui'
export default {
  
  data() {
    return {
      errorImg01: 'this.src="' + require('../.././assets/logo.png') + '"',
      itemarr:[],
      loadmore : false,
      nomore : false,
      currentPage : 1,
      pagesize : 5,
      zpage:0,
      pullup: true,
      urls : '',
      scrollY : 0,
      refreshDelay: 20,
      orderState : '',
      btnShow : true,
      nodata : false
    }
  },
  mounted() {
      this.initData();
      this.urls = HOST;
  },
  methods:{
    jiedan(event,id,orderno){
      if(!event._constructed){
        return;
      }
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"order_no" : orderno,"order_id":id}
      axios.post(HOST + "/Shop/accept_order",params).then((res) => {
        res = res.data
        if(res.result == 'success'){
          Toast({
                  message: res.message,
                  position: 'bottom',
                  duration: 2000
          });
          this.$router.replace('/order/item2/2')
        }else{
          Toast({
                  message: res.message,
                  position: 'bottom',
                  duration: 2000
          });
        }
      })
    },
    judan(id,orderno){
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"order_no" : orderno,"order_id":id}
      let that = this;
      axios.post(HOST + "/Shop/refuse_order",params).then((res) => {
        res = res.data
        if(res.result == 'success'){
          Toast({
                  message: res.message,
                  position: 'bottom',
                  duration: 2000
          });
          that.currentPage = 1;
          that.initData()
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },
    call(phone){
      window.location.href = 'tel:' + phone
    },
    initData(){
      let token = localStorage.getItem("access_token");
      let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":"PAY_SUCCESS"}
      axios.post(HOST + "/Shop/order_list",params).then((res) => {
        this.itemarr = []
        res = res.data
        if(res.result == "success"){
          this.zpage = res.data.total_page
          let arr = res.data.order_list
          this.loadmore = false;
          if(arr != ''){
            for(let item of arr){
              this.itemarr.push(item)
            }
            this.$nextTick(() => {
              //dom更新了 可以调用better-scroll了
              this.initScroll();
            })
            this.currentPage = this.currentPage+1;
          
          }else{
            this.itemarr = ''
            this.nodata = true
          }
        }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
      })
    },
    initScroll(){
      if(this.orderScroll){
        this.orderScroll.refresh();
        console.log('has scroll')
      }else{
        this.orderScroll = new BScroll(this.$refs.orderWrapper,{
          probeType:1,
          click:true
        });
      }
      this.orderScroll.on('scroll',(pos)=>{
        this.scrollY = Math.abs(Math.round(pos.y));
        //console.log("====scrollY" + this.scrollY)
      });
      this.orderScroll.on('touchend', (pos) => {
        // 下拉动作
        if (pos.y > 50) {
          //console.log('xiala')
        }
      });
      this.orderScroll.on('scrollEnd', () => {
        // 滚动到底部
        if (this.orderScroll.y <= (this.orderScroll.maxScrollY + 50)) {
          this.loadData();
        }
      })
    },
    loadData(){
      if(this.currentPage<=this.zpage){
        this.loadmore = true;
        this.nomore = false;
        let token = localStorage.getItem("access_token");
        let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize,"status":"PAY_SUCCESS"}
        axios.post(HOST + "/Shop/order_list",params).then((res) => {
          res = res.data
          if(res.result == "success"){
            let arr = res.data.order_list
            this.loadmore = false;
            if(this.itemarr == ''){
              this.itemarr = arr ; 
            }else{
              for(let item of arr){
                this.itemarr.push(item)
              }
            }
            // this.$nextTick(() => {
            //   //dom更新了 可以调用better-scroll了
            //   this.initScroll();
            // })
            this.currentPage = this.currentPage+1;
          }else{
            Toast({
              message:res.message,
              position:'bottom',
              duration:'2000'
            })
          }
        })
      }else{
        setTimeout(() => {
          this.loadmore = false;
          this.nomore = true;
          setTimeout(() => {
            this.nomore = false;
          }, 1000)
        }, 1500)
      }
    },
    refresh() {
      // 代理better-scroll的refresh方法
      this.orderScroll && this.orderScroll.refresh()
    }
  },
  components:{
    authorComp
  },
  watch: {
    // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
    itemarr() {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  }
}
</script>

<style lang="stylus">
.order-item
  color:#666
  font-size:15px
  position:relative
  width:100%
  .icon-img
    width:20px
    height:20px
    margin-top 5px
  .wrapper
    height:70%
    width:100%
    position:fixed
    top:88px
    left:0
    .loading-wrapper
      text-align:center
      height:24px
      width:100%
      position:absolute
      left:0
      bottom:-24px
      p
        width:100%
        line-height:24px
        font-size:14px
        color:#686868
    .order-ul
      position:absolute
      top:0
      left:0
      width:100%
      li
        margin-bottom:10px
        background:white
        .yh
          display:flex
          border-bottom:1px solid #eee
          padding:10px 20px
          h1
            flex:1
            font-size:18px
            padding-top:5px
            span
              font-size:10px
              padding:2px
              background:#ffc107
              color:#fff
              margin-left:5px
              border-radius:5px
          span
              font-size:10px
              padding:2px
              background:#ffc107
              color:#fff
              margin-left:5px
              border-radius:5px
          img
            flex:0 0 20px
            text-align:center
            font-size:20px
        .o-goods
          padding:10px 20px
          h1
            color:#333
          .beiz
            background:#eee
            margin-top:10px
            padding:10px
            p
              font-size:12px
              margin-top:5px
              span
                color:#ffc107
          .o-goods-ul
            padding:10px 0
            padding-bottom:0
            li
              display:flex
              text-align:right
              p
                font-size:14px
              .g-title
                flex:1
                text-align:left
                font-size:13px
              .g-num
                flex:0 0 50px
              .g-money
                flex:0 0 70px
          .z-money
            padding-bottom:10px
            h1
              float:left
              font-weight:normal              
            span
              color:#ffc107
              float:right
          .g-btn
            clear:both
            margin-top:15px
            display:flex
            .btn-ju,.btn-jie
              height:35px
            .btn-ju
              flex:0 0 30%
            .btn-jie
              margin-left:10px
              flex:1
    
</style>